<template>
  <div class="container">
    <topNav class="top-nav">关于我们</topNav>
    <ul class="nav">
      <li @click="qie('about')"><span :class="{select:type=='about'}">关于我们</span></li>
      <li @click="qie('contact')"><span :class="{select:type=='contact'}">联系我们</span></li>
    </ul>
    <div class="content" v-if="type=='about'" v-html="about_us">
      <!-- <p style="line-height: 30px;">&nbsp;&nbsp;&nbsp;&nbsp;找我啊服装招聘服务平台，是一个专业从事服装行业人才招聘的服务平台。深度服务于服装生产企业和个人，为服装企业提供免费的临时招聘和招商合作信息服务，提高临时招聘信息的时效性和广泛性，并致力于提高广大务工人员找工便利性和舒适性。</p> -->
    </div>

    <ul class="content" v-else v-html="contact_us">
      <!-- <li style="text-indent: 0px;"><span style="font-weight: bold">联系地址：</span><div>&nbsp;&nbsp;&nbsp;&nbsp;广州市天河区龙怡路91号三层自编B169房。</div></li>
      <li style="text-indent: 0px;"><span style="font-weight: bold">联系电话：</span><div>&nbsp;&nbsp;&nbsp;&nbsp;<a href="tel:020-34063086" style="text-decoration: none;color: black">020-34063086</a></div></li> -->
    </ul>
  </div>
</template>

<script>
import topNav from '@/components/topNav'
export default {
  data () {
    return {
      type:'about',
      about_us:'',
      contact_us:''
    }
  },

  components: {
    topNav
  },

  mounted(){
    if(this.$route.query.type=='contact'){
      this.type="contact"
    }else{
      this.type="about"
    };
    this.getAboutMsg()
  },

  methods: {
    qie(value){
      this.type=value;
    },
   async getAboutMsg(){
    let res=await this.$axios.get('/project/getProjectInfo')
    res.data.data.forEach(val=>{
      if(val.type=='contact_us'){
        this.contact_us=val.content;
      }else if(val.type=='about_us'){
        this.about_us=val.content;
      }
      console.log(this.contact_us)
    })
    }
  }
}
</script>

<style scoped>
.container{padding-top: 45px;}
.nav{width: 100%;height: 60px;display: flex;justify-content: row;}
.nav li{width: 50%;line-height: 60px;text-align: center;font-size:18px;color: #000000;
letter-spacing: -0.22px;}
.nav li span{line-height: 60px;padding-bottom: 15px;}
.select{border-bottom: 3px solid #38B4DB;}
.content{padding: 10px;font-size: 17px;color: #000000;}
.content li{margin-top: 10px;text-indent: 40px;line-height: 25px;}
.top-nav{
  height: 45px !important;
}
</style>
